<template>
  <div style="padding-bottom:40px;padding-top:20px">
      <div class="securitybottom" id="securitybottom">
        <!-- <parklist :getParkCodeOnly="parkChange" style="margin-left:20px;margin-right:20px;"></parklist> -->
        <!-- <parklist :getParkCode="parkChange" style="margin-left:1.4%;margin-right:1.4%;"></parklist> -->
        <div style="display: flex;">
          <div style="margin-right: 1.4%;margin-left: 1.4%;width:48%">
              <div class="safePersonCount">
                  <div class="safePersonCount_title">
                      <span class="title_sty">园区专职安全人员数量</span>
                  </div>
                  <div class="safePersonCount_charts">
                      <div id="annular1" ref="annular1" style="width: 100%;height: 260px"></div>
                  </div>
              </div>
          </div>
          <div style="margin-right: 1.4%;width:48%">
              <div class="warnControll">
                  <div class="safePersonCount_title">
                      <span class="title_sty">风险管控</span>
                  </div>
                  <!-- <div style="display:flex"> -->
                  <div style="float:right;margin-right:8%;">
                    <!-- <el-select v-model="value2" @change="handleChoose1" placeholder="请选择园区" size="small" style="margin-left:30px;width:235px">
                        <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select> -->
                     <el-checkbox v-model="checked"  @change="handleCheckChange" style="margin-top:10px">显示平均值</el-checkbox>
                  </div>
                  <div class="warnControll_charts">
                      <div id="annular2" ref="annular2" style="width:100%;height:260px"></div>
                  </div>
              </div>
          </div>
        </div>
    </div>
    <div class="subject">
      <div class="tab">
          <div class="Unit">
            <div class="Unit-title">报警趋势分析</div>
            <div style="display:flex">
                <!-- <el-select v-model="value3" @change="handleChoose2" placeholder="请选择园区" size="small" style="margin-left:10px;width:235px">
                    <el-option
                    v-for="item in options3"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select> -->
                <el-button-group style="margin:0px 0px 0px 1.4%">
                  <el-button @click="energyTrend('day')" size="small">日</el-button>
                  <el-button @click="energyTrend('month')" size="small">月</el-button>
                  <el-button @click="energyTrend('year')" size="small">年</el-button>
                </el-button-group>
            </div>
            <div class="majorHazardAnalysis_charts">
                <div id="annular3" ref="annular3" style="width:100%;height:300px"></div>
            </div>
          </div>
          <div class="Unit">
            <!-- <div style="display:flex">
            <div class="Unit-title2">园区事故</div>
            <el-select class="select" v-model="value4" @change="handleChoose3" placeholder="请选择" size="small">
                <el-option
                v-for="item in options4"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            </div> -->
            <div class="Unit-title4">园区事故</div>
            <div class="Unit-tab">
              <!-- <el-table
                :data="dataList1"
                :header-cell-style='{background:"#F7F8FA"}'
                :cell-style="{'font-size':'9px'}"
                style="width: 100%;border: 1px solid #f0f0f0;height:300px;overflow: auto;"
                highlight-current-row>
                <el-table-column type="index" label="排名" align="center" width="85">
                  <template slot-scope="scope">
                    <span>{{(pageIndex - 1) * 10 + scope.$index + 1}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="time" align='center' label="排名1"  width='85'>
                </el-table-column>
                <el-table-column prop="parkName" align='left' show-overflow-tooltip label="园区名称" width='200'>
                </el-table-column>
                <el-table-column prop="accidentSum" align='center' show-overflow-tooltip label="事故数量">
                </el-table-column>
                <el-table-column prop="rate" align='center' show-overflow-tooltip label="同比(%)">
                </el-table-column>
              </el-table>
              <el-pagination
                  v-if="total != 0"
                  class="pagination"
                  layout="prev, pager, next"
                  :current-page="pageIndex"
                  @current-change="handleCurrentChange"
                  :total="total"
                  :pager-count=5
                 >
              </el-pagination> -->
              <div class="majorHazardAnalysis_charts">
                <div id="annular4" ref="annular4" style="width:100%;height:310px"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import parklist from '@/components/parklist'
export default {
  data () {
    return {
      now: '',
      nowTime: '', // 当前时间
      // value2: '',
      // value3: '',
      // value4: 1, // 园区事故下拉框1-5年
      checked: true, // 显示平均值
      options2: [], // 风险管控园区选择
      // options3: [], // 报警趋势分析园区选择
      alarmSearchType: 'day', // 报警趋势分析日(day)月(month)年(year)切换，初始化时默认选择day
      parkCode: '', // 报警趋势分析园区编码
      // options4: [{ // 园区事故年数选择
      //   value: 1,
      //   label: '一年'
      // }, {
      //   value: 2,
      //   label: '两年'
      // }, {
      //   value: 3,
      //   label: '三年'
      // }, {
      //   value: 4,
      //   label: '四年'
      // }, {
      //   value: 5,
      //   label: '五年'
      // }],
      accidentYears: 1, // 园区事故年数
      pageIndex: 1, // 园区事故页数
      option2SData1: [], // 风险管控柱状图平均值
      option2SData2: [], // 风险管控折线图数量
      option1: {},
      option2: {},
      option3: {},
      option4: {},
      dataList1: [], // 园区事故表数据
      total: 0,
      moreParkShow: false,
      selectPark: [],
      currentPark: '', // 当前园区名
      chartValue1: [], // 安全人员数量选中园区的数据
      chartValue4: [], // 园区事故数量选中园区的数据
      chartLegend4: [], // 园区事故数量图例
      isAll: false // 是否点击全部园区
      // pagerCount: 3,
    }
  },
  mounted () {
    this.now = new Date()
    this.nowTime = this.formatDate(this.now, 'yyyy-MM-dd')
    this.setEchart1()
    this.setEchart2()
    this.setEchart3()
    this.setEchart4()
    this.parkChange(this.$route.query.data)
    window.onresize = () => {
      this['annular1'].resize()
      this['annular2'].resize()
      this['annular3'].resize()
      this['annular4'].resize()
    }
  },
  methods: {
    // getselectPark () {
    //   this.$http.get(`/home/chemical/parkInfo/selectParkAll`).then(({ data: res }) => {
    //     if (res.code === 0) {
    //       res.data.forEach(item => {
    //         this.options2.push({
    //           code: item.code,
    //           name: item.nameAbbreviation
    //         })
    //       })
    //       // this.options3 = this.options2
    //       this.parkCode = res.data[0].code
    //       // this.value2 = res.data[0].code
    //       // this.value3 = res.data[0].code
    //       this.getData()
    //     }
    //   })
    // },
    getData () {
      this.$http.post(`/home/chemical/parkInfo/getSafetyProductionInfoOld`,
        {
          page: 1,
          limit: 10,
          alarmSearchType: 'day',
          searchDate: this.nowTime,
          accidentYears: 1,
          parkCode: this.parkCode // 风险管控和报警趋势分析园区选择默认第一个园区
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          // 园区专职安全人员数量
          this.option1.xAxis.data = res.data.parkSafetyCount.dateList
          let arr1 = [] // 园区安全人员
          let arr1Legend = [] // 园区安全人员图例
          // let arr1Name = [] // 园区名
          // let arr1Value = [] // 园区值
          for (let i in res.data.parkSafetyCount.safeOfficeMap) {
            // this.currentPark = i
            arr1.push({
              name: i,
              type: 'line',
              data: res.data.parkSafetyCount.safeOfficeMap[i],
              emphasis: {
                focus: 'series'
              }
            })
            arr1Legend.push(i)
          }
          this.option1.series = arr1
          this.option1.legend.data = arr1Legend
          // 风险管控
          this.option2.xAxis.data = res.data.riskPointCount.dateList
          this.option2SData1[0] = res.data.riskPointCount.riskPointAvg3
          this.option2SData1[1] = res.data.riskPointCount.riskPointAvg2
          this.option2SData1[2] = res.data.riskPointCount.riskPointAvg1
          this.option2SData1[3] = res.data.riskPointCount.riskPointAvg0

          if (this.checked === true) { // 显示平均值就给柱状图赋值
            this.option2.series[0].data = this.option2SData1[0]
            this.option2.series[1].data = this.option2SData1[1]
            this.option2.series[2].data = this.option2SData1[2]
            this.option2.series[3].data = this.option2SData1[3]
          }

          this.option2.series[4].data = res.data.riskPointCount.riskPointSum3
          this.option2.series[5].data = res.data.riskPointCount.riskPointSum2
          this.option2.series[6].data = res.data.riskPointCount.riskPointSum1
          this.option2.series[7].data = res.data.riskPointCount.riskPointSum0
          this['annular2'].setOption(this.option2)
          // 报警趋势分析
          this.option3.xAxis[0].data = res.data.alarmCount.dateList
          this.option3.series[0].data = res.data.alarmCount.alarmCountAvgList
          this.option3.series[1].data = res.data.alarmCount.alarmCountList
          this['annular3'].setOption(this.option3)
          // 园区事故
          this.option4.xAxis[0].data = res.data.accidentCount.dateList
          let arr4 = [] // 园区事故
          let arr4Legend = [] // 园区事故图例
          // 园区事故数量柱状图
          for (let i in res.data.accidentCount.accidentSumMap) {
            arr4.push({
              name: i,
              type: 'bar',
              // stack: 'total',
              yAxisIndex: 0,
              emphasis: {
                focus: 'series'
              },
              data: res.data.accidentCount.accidentSumMap[i]
            })
            arr4Legend.push(i)
          }
          // 同比折线堆叠图
          for (let i in res.data.accidentCount.yoyMap) {
            let arr4Line = []
            // if (Math.min(...res.data.accidentCount.yoyMap[i]) < 0) { // 有小于0的 遍历加最小值的绝对值
            //   for (let j = 0; j < 6; j++) {
            //     arr4Line.push(res.data.accidentCount.yoyMap[i][j] + Math.abs(Math.min(...res.data.accidentCount.yoyMap[i])))
            //   }
            // } else { // 没有小于0的直接赋值
            arr4Line = res.data.accidentCount.yoyMap[i]
            // }
            arr4.push({
              name: i + '同比(%)',
              type: 'line',
              yAxisIndex: 1,
              emphasis: {
                focus: 'series'
              },
              data: arr4Line
            })
            arr4Legend.push(i + '同比(%)')
          }
          this.option4.series = arr4
          this.option4.legend.data = arr4Legend
          // if (this.isAll === false) { // 点单个园区
          //   if (this.selectPark.indexOf(this.currentPark) < 0) { // 没有当前园区,添加到selectPark数组中
          //     // 图例
          //     this.selectPark.push(arr1Legend[0])
          //     this.chartLegend4.push(arr4Legend[0])
          //     this.chartLegend4.push(arr4Legend[1])
          //     // 值
          //     this.chartValue1.push(arr1[0])
          //     this.chartValue4.push(arr4[0])
          //     this.chartValue4.push(arr4[1])
          //   } else { // 有当前园区，从selectPark数组中删除
          //     this.selectPark.splice(this.selectPark.indexOf(this.currentPark), 1)
          //     this.chartValue1.forEach((item, index) => {
          //       if (item.name === this.currentPark) {
          //         this.chartValue1.splice(index, 1)
          //       }
          //     })
          //     let tempChartValue4 = []
          //     this.chartValue4.forEach((item, index) => {
          //       if (item.name.indexOf(this.currentPark) < 0) {
          //         tempChartValue4.push(item)
          //       }
          //     })
          //     this.chartValue4 = tempChartValue4
          //     let tempChartLegend4 = []
          //     this.chartLegend4.forEach((item, index) => {
          //       if (item.indexOf(this.currentPark) < 0) {
          //         tempChartLegend4.push(item)
          //       }
          //     })
          //     this.chartValue4 = tempChartValue4
          //     this.chartLegend4 = tempChartLegend4
          //   }
          //   // 一个选中园区都没有时显示全部
          //   if (this.chartValue1.length !== 0 && this.selectPark.length !== 0 && this.chartValue4.length !== 0) {
          //     this.option1.series = this.chartValue1
          //     this.option1.legend.data = this.selectPark
          //     this.option4.series = this.chartValue4
          //     this.option4.legend.data = this.chartLegend4
          //   } else { // 全部园区
          //     this.isAll = true
          //     this.parkCode = ''
          //     this.getData()
          //   }
          // } else { // 点全部
          // this.option1.series = arr1
          // this.option1.legend.data = arr1Legend
          // this.option4.series = arr4
          // this.option4.legend.data = arr4Legend
          // }
          this['annular1'].setOption(this.option1, true)
          // this.option4.series = arr4
          // this.option4.legend.data = arr4Legend
          this['annular4'].setOption(this.option4, true)
          // this.total = parseInt(res.data.accidentRatePage.count)
          // this.dataList1 = res.data.accidentRatePage.data
        }
      })
    },
    setEchart1 () {
      this['annular1'] = echarts.init(document.getElementById('annular1'))
      this.option1 = {
        legend: {
          type: 'scroll',
          top: '5%',
          left: '1%',
          data: []
        },
        grid: {
          left: '5%',
          right: '4%',
          bottom: '14%',
          top: '22%'
        },
        tooltip: {
          trigger: 'axis'
          // axisPointer: {
          //   type: 'cross',
          //   crossStyle: {
          //     color: '#999'
          //   }
          // }
        },
        xAxis: {
          type: 'category',
          // data: ['杭州市建德高新技术开发区'],
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            // name: '杭州市建德高新技术开发区',
            type: 'line',
            // data: [0, 0, 0, 0, 0, 0]
            data: []
            // itemStyle: {
            //   normal: {
            //     color: '#1492FF'
            //   }
            // }
          }
        ]
      }
      // 绘制图表
      this['annular1'].setOption(this.option1)
      this.annular1.resize()
    },
    setEchart2 () {
      this['annular2'] = echarts.init(document.getElementById('annular2'))
      this.option2 = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          top: '3%',
          left: '1%',
          data: ['重大风险', '较大风险', '一般风险', '低风险']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '5%',
          top: '20%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          // data: ['一月', '二月', '三月', '四月', '五月', '六月']
          data: []
        },
        yAxis: [
          {
            type: 'value',
            min: 0
          },
          {
            type: 'value',
            min: 0
          },
          {
            type: 'value',
            min: 0
          },
          {
            type: 'value',
            min: 0
          }
        ],
        series: [
          {
            name: '重大风险',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            stack: 'total1',
            barWidth: 20,
            data: [],
            itemStyle: {
              normal: {
                color: '#F24545'
              }
            }
          },
          {
            name: '较大风险',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            stack: 'total1',
            barWidth: 20,
            data: [],
            itemStyle: {
              normal: {
                color: '#FA9358'
              }
            }
          },
          {
            name: '一般风险',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            stack: 'total1',
            barWidth: 20,
            data: [],
            itemStyle: {
              normal: {
                color: '#1492FF'
              }
            }
          },
          {
            name: '低风险',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            stack: 'total1',
            barWidth: 20,
            data: [],
            itemStyle: {
              normal: {
                color: '#6DD993'
              }
            }
          },
          {
            name: '重大风险',
            type: 'line',
            stack: 'total2',
            // data: this.option2SData2[0],
            data: [],
            itemStyle: {
              normal: {
                color: '#F24545',
                lineStyle: {
                  color: '#F24545'
                }
              }
            }
          },
          {
            name: '较大风险',
            type: 'line',
            stack: 'total2',
            // data: this.option2SData2[1],
            data: [],
            itemStyle: {
              normal: {
                color: '#FA9358',
                lineStyle: {
                  color: '#FA9358'
                }
              }
            }
          },
          {
            name: '一般风险',
            type: 'line',
            stack: 'total2',
            // data: this.option2SData2[2],
            data: [],
            itemStyle: {
              normal: {
                color: '#1492FF',
                lineStyle: {
                  color: '#1492FF'
                }
              }
            }
          },
          {
            name: '低风险',
            type: 'line',
            stack: 'total2',
            // data: this.option2SData2[3],
            data: [],
            itemStyle: {
              normal: {
                color: '#6DD993',
                lineStyle: {
                  color: '#6DD993'
                }
              }
            }
          }
        ]
      }
      // 绘制图表
      this['annular2'].setOption(this.option2)
      this.annular2.resize()
    },
    setEchart3 () {
      this['annular3'] = echarts.init(document.getElementById('annular3'))
      this.option3 = {
        backgroundColor: '#FFF',
        legend: {
          // type: 'scroll',
          top: '1%',
          left: '1%',
          data: ['报警数量均值', '报警数量']
        },
        grid: {
          left: '1%',
          right: '1%',
          top: '15%',
          bottom: '10%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        left: 'center',
        top: '11px',
        xAxis: [
          {
            type: 'category',
            data: [],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          },
          {
            axisLabel: {
              show: false
            },
            type: 'value'
          }
        ],
        series: [
          {
            name: '报警数量均值',
            type: 'bar',
            barWidth: '30px',
            // data: [900, 1250, 430, 1100, 1500, 900, 1400, 500, 600, 400],
            data: [],
            color: '#1492FF'
          },
          {
            name: '报警数量',
            type: 'line',
            // data: [1200, 1100, 700, 1100, 1230, 800, 1200, 700, 900, 810],
            data: [],
            color: '#FA9358'
          }
        ]
      }
      // 绘制图表
      this['annular3'].setOption(this.option3)
      this.annular3.resize()
    },
    setEchart4 () {
      this['annular4'] = echarts.init(document.getElementById('annular4'))
      this.option4 = {
        backgroundColor: '#FFF',
        legend: {
          type: 'scroll',
          top: '1%',
          left: '1%',
          data: []
        },
        grid: {
          left: '2%',
          right: '4%',
          top: '18%',
          bottom: '1%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        left: 'center',
        top: '11px',
        xAxis: [
          {
            type: 'category',
            // data: ['十月', '十一月', '十二月', '一月', '二月', '三月'],
            // data: ['2016年', '2017年', '2018年', '2019年', '2020年', '2021年'],
            data: [],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '数量',
            minInterval: 1
          },
          {
            type: 'value',
            name: '同比',
            // min: 0,
            // max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value} %'
            }
          },
          {
            axisLabel: {
              show: false
            },
            type: 'value'
          }
        ],
        series: [
          {
            // name: '杭州市建德高新技术开发区',
            type: 'bar',
            barWidth: 30,
            // itemStyle: {
            //   normal: {
            //     color: '#1492FF'
            //   }
            // },
            emphasis: {
              focus: 'series'
            },
            data: []
            // data: [2, 1, 3, 1, 1, 2]
            // color: '#FA9358'
          }
        ]
      }
      // 绘制图表
      this['annular4'].setOption(this.option4)
    },
    parkChange (val) { // 园区选择
      if (val === '') {
        this.isAll = true
        this.parkCode = ''
        this.selectPark = []
        this.chartValue1 = []
        this.chartValue4 = []
      } else {
        this.isAll = false
        // this.parkCode = this.options2[val].code
        this.parkCode = val
      }
      this.getData()
    },
    handleChoose1 (val) { // 风险管控园区选择
      this.$http.post(`/home/chemical/parkRiskPoint/selectRiskPointCount`,
        {
          searchDate: this.nowTime,
          parkCode: val
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          this.option2SData1[0] = res.data.riskPointAvg3 // 重大风险风险点均值   柱状图
          this.option2SData1[1] = res.data.riskPointAvg2 // 较大
          this.option2SData1[2] = res.data.riskPointAvg1 // 一般
          this.option2SData1[3] = res.data.riskPointAvg0 // 低
          this.option2SData2[0] = res.data.riskPointSum3 // 重大风险风险点数量   折线图
          this.option2SData2[1] = res.data.riskPointSum2 // 较大
          this.option2SData2[2] = res.data.riskPointSum1 // 一般
          this.option2SData2[3] = res.data.riskPointSum0 // 低
          // console.log(this.option2SData1);
          // console.log(this.option2SData2);
          if (this.checked === true) { // 显示平均值就给柱状图赋值
            this.option2.series[0].data = this.option2SData1[0]
            this.option2.series[1].data = this.option2SData1[1]
            this.option2.series[2].data = this.option2SData1[2]
            this.option2.series[3].data = this.option2SData1[3]
          }
          this.option2.series[4].data = this.option2SData2[0]
          this.option2.series[5].data = this.option2SData2[1]
          this.option2.series[6].data = this.option2SData2[2]
          this.option2.series[7].data = this.option2SData2[3]
          this['annular2'].setOption(this.option2)
        }
      })
    },
    handleChoose2 (val) { // 报警趋势园区选择
      this.parkCode = val
      this.$http.post(`/home/chemical/parkAlarmRecord/selectParkAlarmCount`,
        {
          alarmSearchType: this.alarmSearchType,
          searchDate: this.nowTime,
          parkCode: this.parkCode
        }
      ).then(({ data: res }) => {
        // console.log(this.alarmSearchType);
        // console.log(this.nowTime);
        if (res.code === 0) {
          this.option3.xAxis[0].data = res.data.dateList
          this.option3.series[0].data = res.data.alarmCountAvgList
          this.option3.series[1].data = res.data.alarmCountList
          this['annular3'].setOption(this.option3)
        }
      })
    },
    energyTrend (type) { // 报警趋势年月日选择
      this.alarmSearchType = type
      // console.log(this.alarmSearchType)
      this.$http.post(`/home/chemical/parkAlarmRecord/selectParkAlarmCount`,
        {
          alarmSearchType: this.alarmSearchType,
          searchDate: this.nowTime,
          parkCode: this.parkCode
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          this.option3.xAxis[0].data = res.data.dateList
          this.option3.series[0].data = res.data.alarmCountAvgList
          this.option3.series[1].data = res.data.alarmCountList
          this['annular3'].setOption(this.option3)
        }
      })
    },
    handleCheckChange (val) { // 风险管控显示平均值
      if (val) {
        // console.log(this.option2SData1)
        this.option2.series[0].data = this.option2SData1[0]
        this.option2.series[1].data = this.option2SData1[1]
        this.option2.series[2].data = this.option2SData1[2]
        this.option2.series[3].data = this.option2SData1[3]
        this['annular2'].setOption(this.option2)
      } else {
        this.option2.series[0].data = []
        this.option2.series[1].data = []
        this.option2.series[2].data = []
        this.option2.series[3].data = []
        this['annular2'].setOption(this.option2)
      }
    },
    handleChoose3 (val) { // 园区事故年数选择
      this.accidentYears = val
      this.pageIndex = 1
      // console.log(this.accidentYears)
      // console.log(this.pageIndex)
      this.getTableData()
    },
    handleCurrentChange (val) { // 园区事故页数选择
      this.pageIndex = val
      this.getTableData()
    },
    getTableData () { // 园区事故获取表格内容
      this.$http.post(`/home/chemical/parkAccident/selectAccidentRatePage`,
        {
          page: this.pageIndex,
          limit: 10,
          searchDate: this.nowTime,
          accidentYears: this.accidentYears
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          this.dataList1 = res.data.data
        }
      })
    },
    formatDate (date, fmt) {
      if (!date) return
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + '').substr(4 - RegExp.$1.length)
        )
      }
      let o = {
        'M+': addZero(date.getMonth() + 1),
        'd+': addZero(date.getDate()),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      }
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + ''
          fmt = fmt.replace(RegExp.$1, str)
        }
      }
      function addZero (num) {
        return num >= 10 ? num : '0' + num
      }
      return fmt
    }
  },
  components: {
    parklist: parklist
  }
}
</script>
<style lang="scss" scoped>
.securitybottom {
    .safePersonCount {
        // width: 571px;
        height: 350px;
        background: #FFFFFF;
        border: 1px solid #F0F0F0;
        box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
        border-radius: 4px;
    }
    .safePersonCount_title {
        padding: 20px;
        text-align: center;
    }
    .title_sty{
        font-size: 18px;
        font-weight: 700;
    }
    .safePersonCount_charts {
        padding: 0px 20px 0px 20px;
        width: 100%;
    }
    .warnControll {
        // width: 571px;
        height: 350px;
        background: #FFFFFF;
        border: 1px solid #F0F0F0;
        box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
        border-radius: 4px;
    }
    .warnControll_charts {
        width: 100%;
        padding: 0px 20px 20px 20px;
    }
}
.majorHazardAnalysis_charts{
    width: 100%;
    padding: 20px 20px 20px 20px;
}
.subject{
    width: 100%;
    .tab{
      display: flex;
      justify-content:flex-start;
      margin-top: 20px;
      .Unit{
        padding: 0 20px;
        // padding-bottom: 20px;
        // width: 571px;
        width: 48%;
        // height: 315px;
        background: #FFFFFF;
        border: 1px solid #F0F0F0;
        box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.03);
        // margin-right: 20px;
        margin-left: 1.4%;
        // display: flex;
      }
      .matchingCompany{
        padding: 0 12px;
        // width: 571px;
        width: 48%;
        // height: 315px;
        background: #FFFFFF;
        border: 1px solid #F0F0F0;
        box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.03);
      }
    }
    .ech{
      margin-top: 20px;
      width: 1117px;
      height: 363px;
      background: #FFFFFF;
      border: 1px solid #F0F0F0;
      box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.03);
      padding: 20px 0;
      .ech-biao{
        margin: 0 auto;
        width: 1070px;
        // width: 90%;
        height: 260px;
      }
    }
}
.Unit-title{
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    padding: 20px;
}
.Unit-title4{
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    padding: 20px 20px 10px 20px;
}
.Unit-title2{
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    padding: 20px;
    margin-left: 50%;
    transform: translate(-50%);
}
.select{
    // position: absolute;
    width: 110px;
    margin-top: 15px;
    margin-left: 40px;
    // margin-right: 5px;
    // top: 570px;
    // left: 1240px;
}
.pagination{
    margin-top:20px;
    margin-left:40%;
    // transform: translate(-50%);
}
</style>
